<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>
<body>

<div id="div1"></div>
<script src="js/src/jquery-3.2.1.min.js"></script>
<script src="js/src/TweenMax.min.js"></script>
<script>
    $(function () {
        var t = new TimelineMax();

        /*
        * add() --- 添加状态
        *       参数说明：1.字符串或一个函数
        * tweenTo() -- 完成指定的动画(有过渡)
        *       参数说明：1.指定时间或状态的字符串
        * seek():完成指定的动画(无过渡)
        *       参数说明：1.指定时间或状态
        *               2.{可选}布尔值  true:不执行函数 默认 false:执行函数
        * time():动画已执行的时间
        * clear:清除所有的动画
        * staggerTo():添加动画
        *       参数说明：
        *           1.元素选择器或对象
        *           2.持续时间
        *           3.{} 变化的属性-》值
        *           4.{可选} 动画延迟发生时间 可写数字，"-=0.5","+=0.5"
        *
        * */


        t.add('state1');
        t.to('#div1',1,{left:300,onComplete:function () {
            alert( 'left:300' );
        }});
        t.to('#div1',2,{width:300});
        t.add(function () {
            $('#div1').css('background','blue')
        })

        t.add('state2');
        t.to('#div1',3,{height:300});

        t.add('state3');

        t.stop();

        //t.tweenTo('state2');
        //t.tweenTo(3)
        //t.seek( 'state2' );
        t.seek( 4,false );
    })
</script>
</body>
</html>
